<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>盒子浮动/取消浮动</title> 
  <style>
	.clear{
			clear:both;
		}
	.box{
		width:970px;
		margin:0 auto;
	}
	.box-1{
		width:277px;
		height:103px;
		background:red;
		float:left;
	}
	.box-2{
		width:137px;
		height:49px;
		background:rgb(0,255,0);
		float:right;
	}
	.box-3{
		width:679px;
		height:46px;
		background:rgb(0,255,0);
		float:right;
		margin-top:8px;
		margin-bottom:10px;
	}
	.box-4{
		width:310px;
		height:435px;
		background:rgb(255,204,0);
		float:left;
	}
	.box-5{
		width:450px;
		height:240px;
		background:blue;
		float:left;
		margin:0 10px;
	}
	.box-6{
		width:450px;
		height:110px;
		background:blue;
		float:left;
		margin:10px;
	}
	.box-7{
		width:450px;
		height:30px;
		background:blue;
		float:left;
		margin:0 10px;
	}
	.box-8{
		width:190px;
		height:400px;
		background:rgb(204,51,103);
		float:right;
	}
	.box-9{
		width:650px;
		height:25px;
		background:green;
		float:right;
		margin-top:10px;
	}
	.box-10{
		width:970px;
		height:35px;
		background:rgb(0,0,153);
		float:left;
		margin-top:10px;
	}
	
  </style>

 </head>
 <body>




  
 <div class="box">

  <div class="box-1">
  </div>

  <div class="box-2">
  </div>

  <div class="box-3">
	<div class="clear"></div>
  </div>

  <div class="box-4">
  </div>
  <div class="box-8">
  </div>

  <div class="box-5">
  </div>
  <div class="box-6">
  </div>
  <div class="box-7">
  </div>
  <div class="box-9">
  </div>
  <div class="box-10">
  </div>

 </div>
 </body>
</html>
